<h3 class="my-3">组件结构</h3>
<img src="assets/images/pic9.png" />
<br />
<br />
<img src="assets/images/pic10.png" />
<br />
<h3 class="my-3">模板语法</h3>
<table class="table table-bordered">
  <tr>
    <td width="200" class="bg-light text-right">插值表达式</td>
    <td width="50%">
      <pre><code [highlight]="code.html1"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts1"></code></pre>
      </div>
    </td>
    <td>
      <p>插值表达式: {{ currentCustomer }}</p>
    </td>
  </tr>


  <tr>
    <td class="bg-light text-right">属性值绑定</td>
    <td>
      <pre><code [highlight]="code.html2"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts2"></code></pre>
      </div>
    </td>
    <td>
        <img width="100" height="100" src="{{itemImageUrl}}" />
        <img width="120" height="120" [src]="itemImageUrl" />
    </td>
  </tr>


  <tr>
    <td class="bg-light text-right">使用表达式</td>
    <td>
      <pre><code [highlight]="code.html3"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts3"></code></pre>
      </div>
    </td>
    <td>
      <p>The sum of 1 + 1 is {{ 1 + 1 }}.</p>
      <p>小明是{{ type === 'girl' ? '女孩' : '男孩' }}.</p>
    </td>
  </tr>


  <tr>
    <td class="bg-light text-right">使用方法</td>
    <td>
      <pre><code [highlight]="code.html4"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts4"></code></pre>
      </div>
    </td>
    <td>
      <p>The sum of 1 + 1 is not {{ 1 + 1 + getVal()}}.</p>
    </td>
  </tr>

  <tr>
    <td class="bg-light text-right">class及style绑定</td>
    <td>
      <pre><code [highlight]="code.html5"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts5"></code></pre>
      </div>
    </td>
    <td>
      <p [ngClass]="{'text-success': true}">这里是样式绑定</p>
      <p [class.text-danger]="true">这里是样式绑定</p>
      <p [ngClass]="classes">这里是样式绑定</p>
      <hr />
      <p [ngStyle]="{'color': 'green'}">style绑定</p>
      <p [style.color]="'red'">style绑定</p>
      <p [ngStyle]="styles">style绑定</p>
    </td>
  </tr>

  <tr>
    <td class="bg-light text-right">input单向和双向绑定</td>
    <td>
      <pre><code [highlight]="code.html7"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts7"></code></pre>
      </div>
    </td>
    <td>
      <div class="form-group">
        <label>我的花名是：{{name}}</label>
        <input type="text" class="form-control" [value]="name" (input)="name=$event.target.value">
      </div>
      <hr />
      <div class="form-group">
        <label>我的花名是：{{name}}</label>
        <input type="text" class="form-control" [ngModel]="name" (ngModelChange)="name=$event">
      </div>
      <hr />
      <div class="form-group">
        <label>我的花名是：{{name}}</label>
        <input type="text" class="form-control" [(ngModel)]="name">
      </div>
    </td>
  </tr>

  <tr>
    <td class="bg-light text-right">属性绑定</td>
    <td>
      <pre><code [highlight]="code.html8"></code></pre>
    </td>
    <td>
      <p><input type="text" class="form-control" value="禁止" [attr.title]="'原始属性绑定'" /></p>
      <p><input type="text" class="form-control" value="禁止" [disabled]="true" /></p>
      <p><input type="text" class="form-control" value="只读" [readonly]="true" /></p>
      <p><button type="button" class="btn btn-primary" (click)="onSave()" [disabled]="true">保存</button></p>
      <p><button type="button" class="btn btn-primary" (click)="onSave()" [disabled]="false">保存</button></p>
    </td>
  </tr>

  <tr>
    <td class="bg-light text-right">html绑定</td>
    <td>
      <pre><code [highlight]="code.html9"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts9"></code></pre>
      </div>
    </td>
    <td>
      <div [innerHTML]="title"></div>
    </td>
  </tr>


   <tr>
    <td class="bg-light text-right">样式绑定</td>
    <td>
      <pre><code [highlight]="code.html10"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts10"></code></pre>
      </div>
    </td>
    <td>
      <p><button type="button" class="btn btn-primary" [style.font-size.em]="isBigSize ? 3 : 1" >保存</button></p>
      <p><button type="button" class="btn btn-primary" [style.font-size.%]="!isBigSize ? 150 : 50" >保存</button></p>
    </td>
  </tr>

  <tr>
    <td class="bg-light text-right">ngIf和hidden</td>
    <td>
      <pre><code [highlight]="code.html11"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts11"></code></pre>
      </div>
    </td>
    <td>
      <p *ngIf="show">*ngIf => 当条件为真，我会被渲染</p>
      <p *ngIf="!show">*ngIf => 当条件为真，我不会被渲染</p>
      <p [hidden]="show">[hidden] => 当条件为真时，我会显示</p>
      <p [hidden]="!show">[hidden] => 当条件为真时，我会显示</p>
    </td>
  </tr>

  <tr>
    <td class="bg-light text-right">ngSwitch</td>
    <td>
      <pre><code [highlight]="code.html12"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts12"></code></pre>
      </div>
    </td>
    <td>
      <div [ngSwitch]="week">
        <p *ngSwitchCase="0">今天是星期日，我很开心</p>
        <p *ngSwitchCase="1">今天是星期一，我很开心</p>
        <p *ngSwitchCase="2">今天是星期二，我很开心</p>
        <p *ngSwitchCase="3">今天是星期三，我很开心</p>
        <p *ngSwitchCase="4">今天是星期四，我很开心</p>
        <p *ngSwitchCase="5">今天是星期五，我很开心</p>
        <p *ngSwitchCase="6">今天是星期六，我很开心</p>
        <p *ngSwitchDefault>不知道今天星期几，我加班很多天了</p>
      </div>
    </td>
  </tr>


  <tr>
    <td class="bg-light text-right">*ngFor</td>
    <td>
        <pre><code [highlight]="code.html121"></code></pre>
        <hr />
        <div class="code-dark">
            <pre><code [highlight]="code.ts121"></code></pre>
        </div>
    </td>
    <td>
      <p *ngFor="let item of wondersgroup">{{item.name}}总人数为：<span class="text-danger">{{item.presonNum}}</span>人</p>
    </td>
  </tr>


  <tr>
    <td class="bg-light text-right">事件绑定</td>
    <td>
      <pre><code [highlight]="code.html13"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts13"></code></pre>
      </div>
    </td>
    <td>
      <p><button type="button" class="btn btn-primary" (click)="onSave()">保存</button></p>
      <p><button type="button" class="btn btn-primary" (dblclick)="onSave()">保存</button></p>
      <form (submit)="onSave()">
        <button type="submit" class="btn btn-primary">保存</button>
      </form>
    </td>
  </tr>

  <tr>
    <td class="bg-light text-right">管道</td>
    <td>
      <pre><code [highlight]="code.html14"></code></pre>
      <hr />
      <pre><code [highlight]="code.html14a"></code></pre>
    </td>
    <td>
      <p>当前时间是：{{ 1556721313750 | date:'yyyy-MM-dd HH:mm:ss'}}</p>
      <p>字符串截取：{{ '美国大媒体骂特朗普时触犯“天条”，被吓得立刻道歉整改' | slice:0:9}}...</p>
      <p>百分比：{{ 3 / 100 | percent:'1.2-2'}}</p>
      <p>数字格式化：{{ 1235323 / 10000 | number:'1.0-2'}}万元</p>
      <p>json格式化：{{ {'a': 1, b: 2} | json}}</p>
      <p>字母大写：{{'test' | uppercase}}</p>
      <p>字母小写：{{'TEST' | lowercase}}</p>
      <p>链式管道：{{'TEST' | lowercase | slice:1}}</p>
    </td>
  </tr>


  <tr>
    <td class="bg-light text-right">安全导航操作符 ( ?. )</td>
    <td>
      <pre><code [highlight]="code.html15"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts15"></code></pre>
      </div>
    </td>
    <td>
      <p *ngFor="let preson of presons">{{ preson.name }}：
        性别{{ preson.types && (preson.types.sex === 1 ? '女' : '男') }}, 
        身高{{ (preson.types && preson.types.height) || '未知' }}</p>
      <hr />
      <p *ngFor="let preson of presons">{{ preson.name }}：
        性别{{ preson.types?.sex === 1 ? '女' : '男' }}, 
        身高{{ preson.types?.height || '未知' }}</p>
    </td>
  </tr>

  <tr>
    <td class="bg-light text-right">自定义指令和组件</td>
    <td>
      <pre><code [highlight]="code.html16"></code></pre>
      <hr />
      <div class="code-dark">
          <pre><code [highlight]="code.ts16"></code></pre>
      </div>
    </td>
    <td>
      <p myDirective>我这里是p标签,鼠标移上去有效果</p>
      <hr />
      <select class="form-control">
        <option *mySelectDirective="selectItems; let item" [value]="item.key">{{item.value}}</option>
      </select>
      <hr />
      <div class="alert alert-primary">{{loginJson | json}}</div>
      <div class="alert alert-danger">这里子组件传递过来的信息: {{loginMessage}}</div>
      <app-my-component [data]="loginJson" title="这是一个登录组件" (doLogin)="login($event)"></app-my-component>
    </td>
  </tr>
</table>